<template>
    <div id="boy">
        <home-head></home-head>
    </div>

    <div class="header-class-main-box">
        <!-- 显示接收的搜索关键字 -->
        <div class="search-info">
            <p>当前搜索关键词：{{ keyword }}</p>
            <p class="result-count" v-if="results.length > 0">找到 {{ results.length }} 条相关结果</p>
        </div>
        <div class="search-results">
            <template v-if="loading">
                <div class="loading-state">加载中...</div>
            </template>
            <template v-else-if="results.length === 0">
                <div class="no-result">未找到与 "{{ keyword }}" 相关的内容</div>
            </template>
            <template v-else >
                <!-- 遍历展示结果 -->
                <div class="result-item" v-for="item in results" :key="item.id" @click="goToDetail(item.bookId)">
                    <div>
                        <el-image :src="item.covel" fit="cover" style="width: 120px;height: 150px"></el-image>
                    </div>
                    <div class="box-text">
                        <h3 class="result-title">{{ item.name }}</h3>
                        <div style="display: flex; margin-top: 20px">
                            <span>作者：{{ item.author }}</span>
                            <span class="result-category">{{ item.category }}</span>
                        </div>
                        <p class="result-desc">{{ item.description }}</p>

                        <span style="margin: 20px 0">更新时间：{{ item.updateTime }}</span>

                    </div>
                </div>
            </template>
        </div>
    </div>
    <home-bottom></home-bottom>

</template>

<script setup>
import { ref, onMounted ,watch  } from 'vue';
import { useRoute } from 'vue-router';
import HomeHead from "@/components/home/home-head.vue";
import request from '@/utils/request.js';
import { ElLoading, ElMessage } from "element-plus";
import router from "@/router/index.js";

// 获取当前路由信息
const route = useRoute();
// 存储接收的搜索关键字
const keyword = ref('');
// 存储搜索结果
const results = ref([]);
// 加载状态（使用ref管理，而非仅依赖ElLoading）
const loading = ref(false);

onMounted(() => {
    // 从路由参数中获取keyword
    keyword.value = route.query.keyword || '';

    // 如果有关键字，自动执行搜索
    if (keyword.value.trim()) {
        fetchSearchResults();
    }
});

// 请求搜索结果的方法
const fetchSearchResults = async () => {
    loading.value = true;
    const loadingInstance = ElLoading.service({
        lock: true,
        text: '正在搜索...',
        background: 'rgba(0, 0, 0, 0.3)'
    });

    try {
        // 真实接口请求代码（注释掉，实际使用时开启）
        const response = await request.get('/api/books/search', {
            params: { keyword: keyword.value }
        });
        results.value = response.data || [];
    } catch (error) {
        ElMessage.error('获取搜索结果失败：' + (error.message || '网络异常'));
        results.value = []; // 出错时清空结果
    } finally {
        loading.value = false;
        loadingInstance.close(); // 关闭加载动画
    }
};
watch(() => route.query.keyword, (newKeyword) => {
    keyword.value = newKeyword || '';
    if (keyword.value.trim()) {
        fetchSearchResults();
    }
}, { immediate: true });
const goToDetail = (id) => {
    router.push({
        name: 'bookList', // 对应路由配置中的name
        params: { id } // 传递id参数
    });
};
</script>

<style scoped>
.header-class-main-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    gap: 20px;
}

.search-info {
    align-self: flex-start;
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.result-count {
    color: #ff7d00;
    margin-top: 5px;
    font-size: 1rem;
}

.search-results {
    width: 100%;
    min-height: 300px;
}

.loading-state, .no-result {
    text-align: center;
    padding: 50px 0;
    color: #666;
    font-size: 1rem
;
}

.result-item {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    display: flex;
}

.result-item:hover {
    background-color: #f9f9f9;
    transform: translateX(5px);
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.result-title {
    margin: 0;
    font-size: 1.1rem;
    color: #409eff;
    cursor: pointer;
}
.box-text{
    margin-left: 10px;
}
.result-title:hover {
    color: #409eff;

}

.result-category {
    background-color: #e8f4fd;
    color: #409eff;
    border-radius: 4px;
    font-size: 1rem;
    margin-left: 50px;
}

.result-desc {
    margin: 10px 0;
    color: #666;
    line-height: 1.6;
    font-size: 1rem;
    max-height: 4.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;

}

.result-meta {
    display: flex;
    gap: 20px;
    color: #999;
    font-size: 1rem;
}

/* 响应式适配 */
@media (max-width: 768px) {
    .header-class-main-box {
        padding: 10px;
    }

    .result-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .result-meta {
        flex-direction: column;
        gap: 5px;
    }
}
</style>